<style>
  .demo-upload-list{
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
  }
  .demo-upload-list img{
    width: 100%;
    height: 100%;
  }
  .demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
  }
  .demo-upload-list:hover .demo-upload-list-cover{
    display: block;
  }
  .demo-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
  .img{
    width: 100px;
    height: 120px;
  }
</style>
<template>
  <div>
    <Modal
      :value="modalState"
      :title="title"
      :loading="loading"
      @on-ok="handleSubmit"
      @on-cancel="cancel"
      width="600">
      <Form
        ref="userlistModal"
        :model="row"
        :rules="ruleInline"
        inline
        style="width: 100%"
        :label-width="85">
        <FormItem prop="uname" label="用户姓名" style="width: 250px">
          <Input type="text" v-model="row.uname" placeholder="请输入用户姓名" />
        </FormItem>
        <FormItem prop="password" label="密码" style="width: 250px">
          <Input type="text" v-model="row.password" placeholder="请输入密码" />
        </FormItem>
        <FormItem prop="tel" label="联系电话" style="width: 250px">
          <Input type="text" v-model="row.tel" placeholder="请输入联系电话" />
        </FormItem>
        <!-- <FormItem prop="ctime" label="创建时间" style="width: 250px">
          <DatePicker type="date" v-model="row.ctime" placeholder="请输入创建时间"></DatePicker>
        </FormItem> -->
        <FormItem prop="pid" label="上级id" style="width: 250px">
          <Select v-model="row.pid" clearable placeholder="请选择上级ID">
            <Option v-for="item in pidList" :value="item.id" :key="item.id">
              {{ item.uname }}
            </Option>
          </Select>
        </FormItem>
        <!-- <FormItem prop="img" label="img" style="width: 250px">
          <Input type="text" v-model="row.img" />
        </FormItem> -->
        <FormItem prop="state" label="账户状态" style="width: 250px">
          <Select v-model="row.state" clearable placeholder="请选择账户状态">
            <Option value="0">
              启用
            </Option>
            <Option value="1">
              禁用
            </Option>
          </Select>
        </FormItem>
        <FormItem prop="role" label="权限id" style="width: 250px">
          <Select v-model="row.role" clearable placeholder="请选择权限ID">
            <Option v-for="item in roleList" :value="item.role.toString()" :key="item.role">
              {{ item.gname }}
            </Option>
          </Select>
        </FormItem>
        <!-- <FormItem v-if="row.id && row.img!== null" prop="img" label="头像" style="width: 100%">
        <img :src="row.img" class="img">
      </FormItem>
      <FormItem v-else-if="row.id" prop="img" label="头像" style="width: 100%">
        <div>暂无</div>
      </FormItem>
      <FormItem label="头像" style="width: 100%">
        <div class="demo-upload-list" v-for="item in uploadList" :key="item.id">
          <template v-if="item.status === 'finished'">
            <img :src="item.url">
            <div class="demo-upload-list-cover">
              <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
            </div>
          </template>
        </div>
        <Upload
          ref="upload"
          :show-upload-list="false"
          :default-file-list="defaultList"
          :on-success="handleSuccess"
          :format="['jpg','jpeg','png']"
          :max-size="2048"
          :on-format-error="handleFormatError"
          :on-exceeded-size="handleMaxSize"
          :before-upload="handleBeforeUpload"
          :headers="{
            'agent': 'Web',
            'token': token
            }"
          multiple
          type="drag"
          action="http://localhost:8080/api/upload?folder=icon"
          style="display: inline-block;width:58px;">
          <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="ios-camera" size="20"></Icon>
          </div>
        </Upload>
      </FormItem> -->
      </Form>
    </Modal>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
import { getToken } from '../../libs/util'
export default {
  name: 'UserlistModal',
  data () {
    return {
      title: '',
      loading: true,
      url: '',
      loadingStatus: false,
      defaultList: [],
      uploadList: [],
      imgName: '',
      token: getToken(),
      form: {
        uname: '',
        password: '',
        tel: '',
        ctime: '',
        pid: '',
        img: '',
        state: '',
        role: ''
      },
      ruleInline: {
        uname: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '权限ID不能为空', trigger: 'change' }
        ]
      }
    }
  },
  updated () {
    if (this.row.id && this.row.id !== '') {
      this.title = '修改用户列表'
    } else {
      this.title = '添加用户列表记录'
    }
  },
  computed: {
    ...mapState({
      row: state => state.system.row,
      employeeRow: state => state.employee.row,
      modalState: state => state.modal.modalState,
      roleList: state => state.system.roleList,
      pidList: state => state.system.pidList
    })
  },
  methods: {
    ...mapActions(['updateModalState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$refs.userlistModal.validate((valid) => {
        if (!valid) {
          return this.changeLoading()
        }
        this.$emit('userlist-valid', {
          id: this.row.id,
          uname: this.row.uname,
          password: this.row.password,
          tel: this.row.tel ? parseInt(this.row.tel) : '',
          // ctime: this.row.ctime ? this.$moment(this.row.ctime).format('YYYY-MM-DD HH:mm:ss') : '',
          pid: this.row.pid ? parseInt(this.row.pid) : '',
          img: this.url ? this.url : '',
          state: this.row.state ? parseInt(this.row.state) : '',
          role: this.row.role
        })
        this.$refs['userlistModal'].resetFields()
      })
    },
    cancel () {
      this.updateModalState(false)
      this.$refs['userlistModal'].resetFields()
    },
    handleView (name) {
      this.imgName = name
      this.visible = true
    },
    handleRemove (file) {
      const fileList = this.$refs.upload.fileList
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
    },
    handleSuccess (response, file, fileList) {
      console.log(response)
      console.log(file)
      console.log(fileList)
      file.url = response.data
      this.url = response.data
      setTimeout(() => {
        this.uploadList = null
        this.$Message.success('Success')
      }, 1500)
      // file.name = '7eb99afb9d5f317c912f08b5212fd69a'
      // this.defaultList.push(file)
    },
    async uploadIcon (playload) {
      await uploadFile(playload)
    },
    upload () {
      this.uploadIcon({ floder: this.fileName })
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: 'The file format is incorrect',
        desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
      })
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: 'Exceeding file size limit',
        desc: 'File  ' + file.name + ' is too large, no more than 2M.'
      })
    },
    handleBeforeUpload (file) {
      // this.uploadData.folder = 'icon'
      this.fileName = file.name
      // this.upload()
      const check = this.uploadList.length < 5
      if (!check) {
        this.$Notice.warning({
          title: 'Up to five pictures can be uploaded.'
        })
      }
      return check
    }
  }
  // mounted () {
  //   this.uploadList = this.$refs.upload.fileList
  // }
}
</script>
